<template>
<div class="news">
  <div class="title">
          <p><span><span class="acicon">普通交易</span><span>大宗交易</span></span> </p>
      </div>
  <div class="content">
     
    <!-- 列表页 与 内容详情页 同一模版 -->
    <!-- <div class="container">
      <div>
       
        <div class="main">
          <p><span class="name">喜洋洋</span><img src="" alt=""><span class="time">注册时间：2019-07-04</span></p>
          <ul class="overflow">
            <li class="float-left">
              <p>交易量</p>
              <p>47850662.38975530 USDT</p>
            </li>
            <li class="float-left">
              <p>平台保证金</p>
              <p>1000 TOKEN</p>
            </li class="float-left">
            <li class="float-left">
              <p>平均放币时长</p>
              <p>1 MIN</p>
            </li class="float-left">
            <li class="float-left">
              <p>30日完成率</p>
              <p>98%</p>
            </li>
            <li class="float-left">
              <p>总成单（买  卖）</p>
              <p>1135( <span>256</span>/ <span>2564</span> )次</p>
            </li>
            <li class="float-left">
              <p>30日成单</p>
              <p>1105次</p>
            </li>
          </ul>
          <p class="Authentication">
            <span><img src="" alt="">手机认证</span>
            <span><img src="" alt="">邮箱认证</span>
            <span><img src="" alt="">一级认证</span>
            <span><img src="" alt="">二级认证</span>
          </p>
        </div>

        <ul class="overflow Sell">
          <li class="main">
            <p class="chushou">在线出售</p>
              <ul class="child">
                <li class="float-left">
                  <p>币种</p>
                  <p>47850662.38975530 </p>
                </li>
                <li class="float-left">
                  <p>平台保证金</p>
                  <p>1000 TOKEN</p>
                </li>
                <li class="float-left">
                  <p>平均放币时长</p>
                  <p>1 MIN</p>
                </li>
                <li class="float-left">
                  <p>30日完成率</p>
                  <p>98%</p>
                </li>
                <li class="float-left">
                  <p>总成单（买  卖）</p>
                  <p>1135( <span>256</span>/ <span>2564</span> )次</p>
                </li>
                <li class="float-left">
                  <p>30日成单</p>
                  <p>1105次</p>
                </li>
              </ul>
          </li>
        </ul>
      </div>
    </div> -->
    <div class="transactionsOrdinary Layout">
        <div class="main_l">
          <el-tabs :tab-position="tabPosition" :stretch="true" style="color:#000;">
            <el-tab-pane label="USDT">用户管理</el-tab-pane>
            <el-tab-pane label="ETH">配置管理</el-tab-pane>
            <el-tab-pane label="BTC">角色管理</el-tab-pane>
            <el-tab-pane label="EOS">定务补偿</el-tab-pane>
            <el-tab-pane label="BCH">配置管理</el-tab-pane>
            <el-tab-pane label="LTC">角色管理</el-tab-pane>
          </el-tabs>
          <p>成为商家</p>
        </div>
        <div class="main_r">
          <p>
            <span>我要买币</span>
            <span>我要卖币</span>
            <span><img src="" alt=""> 待处理订单</span>
            <span><img src="" alt=""> 我的评价</span>
          </p>
          <p>1USDT≈6.92 CNY 当前市场参考价格</p>
          <p><select name="" id=""></select><select name="" id=""></select><span><img src="" alt=""> 认证商家</span><input type="text"></p>


           <el-table :data="dealList" class="deal-table" width="800">
            <el-table-column prop="one" label="交易品种" width="100" align="center"></el-table-column>

            <el-table-column label="最新成交价" width="170" align="right">
              <template slot-scope="scope">
                <div :style="{color: scope.row.eight ? '#FD7175':'#29C086'}">{{scope.row.two + '&nbsp;&nbsp;&nbsp;' + (scope.row.eight ? '&uarr;':'&darr;')}}</div>
              </template>
            </el-table-column>

            <el-table-column prop="three" label="24H成交量" width="160" align="right"></el-table-column>
            <el-table-column prop="four" label="24H成交量" width="160" align="right"></el-table-column>
            <el-table-column prop="five" label="24H最高价" width="175" align="right"></el-table-column>
            <el-table-column prop="six" label="24H最低价" width="175" align="right"></el-table-column>
            <el-table-column label="日涨跌" width="100" align="center">
              <template slot-scope="scope">
                <div :style="{color: scope.row.eight ? '#FD7175':'#29C086'}">{{(scope.row.eight ? '+': '-') + scope.row.seven}}%</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="small" type="success"  @click="handleEdit(scope.$index, scope.row)">交易</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return {
      cNew:[],
      news:[],
      tabPosition:'left',
      dealList:[]
    }
  }
  
}
</script>

<style lang="scss" scoped>
@import '../assets/css/var.css';
.news {
    padding-top: 80px;
}
.title{
  p{
      height: 80px;
      line-height: 60px;
      padding-top: 20px; 
      background:#fff;
      text-align: center;
      box-shadow: 0px 0px 5px 0px #333333;
      z-index: 999;
      margin-bottom: 5px;
      >span{
        display: inline-block;
        width: 1200px;
        margin: 0 auto;
        text-align: left;
         span{
        display: inline-block;
        margin-right: 20px;
        font-size:16px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(45,47,86,1);
        line-height:27px;
        
      }
      .acicon{
        color:rgba(104,129,255,1);
      }
      }
  }
      
  }
.content {
  .container{
     
    .main {
      margin: 15px 0px;
      box-shadow:0px 4px 8px 0px rgba(21,21,28,0.04);
      >p {
        line-height: 60px;
        background:rgba(247,247,251,1);
        font-weight:bold;
        color:rgba(45,47,86,1);
        .name {
          font-weight:bold;
          padding: 0px 15px;
          font-size: 18px;
        }
        
        .time {
          float: right;
          font-weight:400;
          padding: 0px 15px;
        }
      }
      .chushou{
          background: #fff;
        }
      .Authentication {
        text-align: right;
        span {
          display: inline-block;
          margin-right: 40px; 
        }
      }
      ul{
        width: 1200px;
        li {
          width: 16.6%;
          p {
            text-align: center;
            line-height: 25px;
            font-size: 12px;
          }
          p:nth-child(1){
            color:rgba(140,151,157,1);
          }
          p:nth-child(2){
            color:rgba(45,47,86,1);
          }
        }
      }
    }

    // 出售部分
    .Sell {
      .main {
      margin: 15px 0px;
      box-shadow:0px 4px 8px 0px rgba(21,21,28,0.04);
      >p {
        line-height: 60px;
        background:rgba(247,247,251,1);
        font-weight:bold;
        color:rgba(45,47,86,1);
        .name {
          font-weight:bold;
          padding: 0px 15px;
          font-size: 18px;
        }
        
        .time {
          float: right;
          font-weight:400;
          padding: 0px 15px;
        }
      }
      .chushou{
          background: #fff;
        }
      .Authentication {
        text-align: right;
        span {
          display: inline-block;
          margin-right: 40px; 
        }
      }
      ul{
        width: 1200px;
        li {
          width: 16.6%;
          p {
            text-align: center;
            line-height: 25px;
            font-size: 12px;
          }
          p:nth-child(1){
            color:rgba(140,151,157,1);
          }
          p:nth-child(2){
            color:rgba(45,47,86,1);
          }
        }
      }
    }
    }
    
  }
  .child {
    height: 100px;
  }
}
.transactionsOrdinary{
      margin-top: 60px;
      .main_l {
        width: 300px;
        display: inline-block;
        float: left;
      }
      .main_r {
        width: 800px;
        height: 500px;
        display: inline-block;
      }
}
.item{
  display: block;
  img {
    float: left;
  }
  .title{
    font-weight: bold;
    font-size: 20px;
  }
}
</style>
